<template>
  <div>
    <Category :fetchCategoryId="fetchCategoryId" />
    <div v-show="scene == 0">
      <el-card style="margin: 20px 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          title="8989"
          @click="addSpu"
          >添加SPU</el-button
        >

        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          border=""
          stripe=""
          :data="spuInfo.records"
          style="width: 100%; margin: 20px 0"
        >
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="spuName" label="spu名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="spu描述" width="width">
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{ row }">
              <HintButton
                title="添加SKU"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addSku(row)"
              ></HintButton>
              <HintButton
                title="修改SPU"
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="updateSpu(row)"
              ></HintButton>
              <HintButton
                title="查看当前SPU全部SKU"
                type="info"
                icon="el-icon-info"
                size="mini"
                @click="watchSku(row)"
              ></HintButton>
              <HintButton
                title="删除SPU"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteSpu(row)"
              ></HintButton>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="getSpuList"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout=" prev, pager, next, jumper,->,sizes,total"
          :total="spuInfo.total"
        >
        </el-pagination>
      </el-card>
    </div>

    <AddSpu
      v-show="scene == 1"
      ref="addspu"
      @changeScene="changeScene"
    ></AddSpu>
    <AddSku v-show="scene == 2" ref="addsku" @changeScene="changeScene"></AddSku>


        <!-- 对话框 -->
    <el-dialog title="SKU列表" :visible.sync="dialogTableVisible">
      <el-table :data="skuArr" v-loading="load1">
        <el-table-column
          prop="skuName"
          label="名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
          width="200"
        ></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import AddSpu from "./addSpu";
import AddSku from "./addSku";
export default {
  components: {
    AddSku,
    AddSpu,
  },
  data() {
    return {
      load1:false,
      dialogTableVisible:false,
      c1: "",
      c2: "",
      c3: "",
      page: 1,
      limit: 3,
      spuInfo: {},
      loading: false,
      scene: 0,
      skuArr:[]
    };
  },
  methods: {
     //查看全部SKU实例
    async watchSku(row) {
      this.dialogTableVisible = true;
      this.load1 = true;
      try {
        let result = await this.$http.spu.reqSkuInfo(row.id);
        this.skuArr = result.data;
        this.load1 = false;
      } catch (error) {}
    },
    //删除某一个SPU
    async deleteSpu(row) {
      try {
        await this.$http.spu.reqDeleteSpu(row.id);
        this.getSpuList(
          this.spuInfo.records.length > 1 ? this.page : this.page - 1
        );
      } catch (error) {}
    },
    changeScene(flag) {
      this.scene = 0;
      // console.log(flag);
      let p = flag ? this.page : 1;
      this.getSpuList(p);
    },
    updateSpu(spu) {
      this.scene = 1;
      this.$refs.addspu.getSpuInfo(spu);
    },
    addSpu() {
      this.scene = 1;
      this.$refs.addspu.init(this.c3);
    },
    addSku(row) {
      this.scene = 2;
      this.$refs.addsku.init(this.c1,this.c2,row);
    },
    handleSizeChange() {},

    fetchCategoryId(id, level) {
      // console.log(id, level);
      switch (level) {
        case 1:
          this.c1 = id;
          this.c2 = "";
          this.c3 = "";
          break;
        case 2:
          this.c2 = id;
          this.c3 = "";
          break;
        default:
          this.c3 = id;
          this.getSpuList();
          break;
      }
    },

    async getSpuList(pager = 1) {
      this.loading = true;
      this.page = pager;
      let { page, limit, c3 } = this;
      let res = await this.$http.spu.reqSpuList(page, limit, c3);
      this.loading = false;
      if (res.code == 200) {
        this.spuInfo = res.data;
      }
    },
  },
};
</script>

<style>
</style>